<template>
  <div>
    <logintitle :isshow="false" :title="'注册'" :right="'登录'" @click="$router.push('/login')"></logintitle>
    <div class="registered-body">
      <div class="form">
        <input type="text" class="border-bom" placeholder="请输入手机号" v-model="regText">
        <input type="password" placeholder="请输入密码" v-model="regPassword">
      </div>
      <input id="submit" type="button" name="submit" value="注册" class="btn" @click="submit">
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
import Vue from 'vue'
import { Notify } from 'vant'
import logintitle from './logintitle'
Vue.use(Notify)
export default {
  data () {
    return {
      regText: '',
      regPassword: ''
    }
  },
  mounted() {
    this.settabbar(false)
  },
  methods: {
    ...mapMutations('user', ['setuser']),
    ...mapMutations('tabbar', ['settabbar']),
    submit () {
      if (!(/^1[3456789]\d{9}$/.test(this.regText))) {
        this.$notify({
          message: '手机号不合法',
          duration: 800,
          color: '#ffffff',
          background: '#ff0000'
        })
        return
      }
      var flag = this.userList.some(item => {
        return item.name === this.regText
      })
      if (!flag) {
        this.setuser({
          name: this.regText,
          pwd: this.regPassword
        })
        this.$notify({
          message: '注册成功',
          duration: 800,
          color: '#ffffff',
          background: '#07c160'
        })
        setTimeout(() => {
          this.$router.push('/login')
        }, 800)
      } else {
        this.$notify({
          message: '用户已存在',
          duration: 800,
          color: '#ffffff',
          background: '#ff976a'
        })
      }
    }
  },
  computed: {
    ...mapState('user', ['userList'])
  },
  components: {
    logintitle
  },
  destroyed () {
    this.settabbar(true)
  }
}
</script>
<style lang="scss" scoped>
  body{
    background: #f5f5f5;
  }
  .registered-body{
    margin: 15px 15px 0 15px;
    position: relative;
    width: 345px;
    height: 210px;
    .form{
      width: 100%;
      padding: 0 15px;
      background: #ffffff;
      color: #000000;
      box-sizing: border-box;
      input{
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        outline: none;
        border: none;
      }
      .border-bom{
        border-bottom: 1px solid #EAEAEA;
      }
    }
    .btn{
      cursor: pointer;
      margin: 0 auto;
      vertical-align: middle;
      width: 332px;
      height: 42px;
      background-color: #FFD444;
      font-size: 14px;
      position: absolute;
      bottom: 7.5px;
      border: none;
      padding: 1px 6px;
      box-sizing: content-box;
    }
  }
</style>
